<template>
	<view class="topup-history-item" v-if="detail">
		<view class="topup-history-item-top-wrapper">
			<view class="topup-number">
				编号：{{detail.task_code}} <i class="iconfont icon-copy" @click="copy"/>
			</view>
			<view class="topup-createtime">
				{{dayjs(detail.created_at).format('MM-DD HH:mm')}}
			</view>
		</view>
		<view class="topup-history-item-bottom-wrapper">
			<view class="topup-info-wrapper">
				<view class="topup-amount">
					<view class="label">
						充值金额：
					</view>
					<view class="value">￥{{detail.amount}}</view>
				</view>
				<view class="topup-reach-status">
					<view class="label">
						到账状态：
					</view>
					<view class="value">未到账</view>
				</view>
			</view>
			<view class="check-status-wrapper">
				<view class="label">
					审核状态：
				</view>
				<view class="value" :class="global.topupCheckStatusList[detail.status].color">
					{{global.topupCheckStatusList[detail.status].name}}
				</view>
			</view>
			<view class="reach-time-wrapper" v-if="detail.reach_time">
				<view class="label">
					到账时间：
				</view>
				<view class="time">
					{{detail.reach_time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ITopupHistoryItem } from './types';
	import { defineProps } from 'vue';
	import global from '@/global';
	import dayjs from 'dayjs';

	interface Iprops {
		detail : null | ITopupHistoryItem,
	}

	const props = withDefaults(defineProps<Iprops>(), {
		detail: null,
	})
	
	const copy = ()=>{
		uni.setClipboardData({
			data:props.detail!.task_code,
			success:()=>{
				uni.prompt.$showToast('已复制充值编号')
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./topupHistoryItem.scss";
</style>